<template>
  <view class="showVideo">
    <u-navbar
      :title="title"
      bgColor="#000"
      leftIconColor="#fff"
      leftIconSize="40rpx"
      titleStyle="color:#fff"
      height="100rpx"
      @leftClick="leftClick"
    >
    </u-navbar>

    <view class="downLoad">
      <view class="left">
        <u-avatar src="../../static/logo.png" shape="square"></u-avatar>
        <text> Get the full experience on the app</text>
      </view>
      <view class="right">
        <u-button
          type="primary"
          size="small"
          shape="circle"
          text="open"
          @tap="goPage"
        ></u-button>
      </view>
    </view>

    <view class="videoContent">
      <videoPlayer :video="dataObj" ref="player"></videoPlayer>
    </view>
  </view>
</template>

<script>
import videoPlayer from "../components/videoPlayer.vue";

export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      title: "An unspeakable secret",
      dataObj: {},
      dataLits: [],
      isShow: true,
    };
  },
  onLoad(options) {
    this.title = options.Title;
    this.initData(options.id, options.Episode);
    document.title = options.Title || "flowShort";
  },
  methods: {
    leftClick() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    goPage() {
      uni.navigateTo({
        url: "/pages/downLoad/downLoad",
      });
    },
    goHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    clickHandle(item) {
      this.dataLits = item.List;
    },
    initData(id, Episode) {
      uni.request({
        url: "https://api.flowshort.tv/video/episode",
        header: {
          "content-type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        data: {
          VideoId: Number(id),
          Episode: Number(Episode),
        },
        method: "POST",
        success: (res) => {
          if (res.statusCode == 200) {
            this.dataObj = res.data.Data;
          }
        },
      });
    },
    showHandle(item) {
      if (item.Lock == 0) {
        uni.navigateTo({
          url: "/pages/showVideo/showVideo?id=" + item.Id,
        });
      } else if (item.Lock == 1) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.showVideo {
  width: 100%;
  position: relative;
  background-color: #000;
  min-height: 100vh;

  .downLoad {
    position: fixed;
    top: 100rpx;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    //背景颜色渐变
    background: linear-gradient(to right, #fe5d68, #fe7861);
    padding: 0 30rpx;
    z-index: 9999;
    .left {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #fff;
      .u-avatar {
        margin-right: 20rpx;
      }
    }

    .right {
      .u-button--primary {
        background-color: #fff;
        border: none;
        color: #fe5d68;
        text-transform: uppercase;
      }
    }
  }

  .videoContent {
    width: 100%;
  }
}
</style>
